<template>
  <div>
    <div><h1>学生信息</h1></div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit2(),Graph()"
          >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="stuMain">
      <el-table size="small" stripe border :data="student" fit>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="id" label="学号"> </el-table-column>
        <el-table-column prop="clazz" label="班级"> </el-table-column>
        <el-table-column prop="room" label="宿舍号"> </el-table-column>
        <el-table-column prop="height" label="身高"> </el-table-column>
        <el-table-column prop="weight" label="体重"> </el-table-column>
        <el-table-column prop="mileageTerm1" label="跑步数1"> </el-table-column>
        <el-table-column prop="mileageTerm2" label="跑步数2"> </el-table-column>
        <el-table-column prop="mileageTerm3" label="跑步数3"> </el-table-column>
        <el-table-column prop="mileageTerm4" label="跑步数4"> </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="showStu(scope.$index, scope.row)"
            >编辑
            </el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="stuMain">
      <el-table size="small" stripe border :data="students" fit>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="id" label="学号"> </el-table-column>
        <el-table-column prop="clazz" label="班级"> </el-table-column>
        <el-table-column prop="room" label="宿舍号"> </el-table-column>
        <el-table-column prop="height" label="身高"> </el-table-column>
        <el-table-column prop="weight" label="体重"> </el-table-column>
        <el-table-column prop="mileageTerm1" label="跑步数1"> </el-table-column>
        <el-table-column prop="mileageTerm2" label="跑步数2"> </el-table-column>
        <el-table-column prop="mileageTerm3" label="跑步数3"> </el-table-column>
        <el-table-column prop="mileageTerm4" label="跑步数4"> </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="showStu(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="编辑学生" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-tag>学生姓名</el-tag>
        <el-input
          size="small"
          v-model="updateStu.name"
          class="updateStuInput"
        ></el-input>

        <el-tag>学生班级</el-tag>
        <el-input
          size="small"
          v-model="updateStu.clazz"
          class="updateStuInput"
        ></el-input>
        <el-tag>学生宿舍号</el-tag>
        <el-input
          size="small"
          v-model="updateStu.room"
          class="updateStuInput"
        ></el-input>

        <el-tag>第一学期公里数</el-tag>
        <el-input
          size="small"
          v-model="updateStu.mileageTerm1"
          class="updateStuInput"
        ></el-input>
        <el-tag>第二学期公里数</el-tag>
        <el-input
          size="small"
          v-model="updateStu.mileageTerm2"
          class="updateStuInput"
        ></el-input>
        <el-tag>第三学期公里数</el-tag>
        <el-input
          size="small"
          v-model="updateStu.mileageTerm3"
          class="updateStuInput"
        ></el-input>
        <el-tag>第四学期公里数</el-tag>
        <el-input
          size="small"
          v-model="updateStu.mileageTerm4"
          class="updateStuInput"
        ></el-input>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="doUpdateStu"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "student07",
  data() {
    return {
      formInline: {
        name: "",
      },
      user: JSON.parse(window.sessionStorage.getItem("user")),
      students: [],
      student: [],
      dialogVisible: false,
      updateStu: {
        id: "",
        name: "",
        clazz: "",
        room: "",
        mileageTerm1: "",
        mileageTerm2: "",
        mileageTerm3: "",
        mileageTerm4: "",
      },
    };
  },
  mounted() {
    this.initStu();
  },
  methods: {
    doUpdateStu() {
      this.putRequest("/student/update", this.updateStu).then((resp) => {
        if (resp) {
          this.initStu();
          this.dialogVisible = false;
        }
      });
    },
    showStu(index, data) {
      this.updateStu = data;
      this.dialogVisible = true;
    },
    handleDelete(index, data) {
      this.$confirm(
        "此操作将永久删除[" + data.name + "]学生, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/student/" + data.id).then((resp) => {
            if (resp) {
              this.initStu();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    initStu() {
      this.getRequest("/clazz/" + this.user.clazz, {}).then((resp) => {
        if (resp) {
          this.students = resp;
        }
      });
    },
    onSubmit2() {
      this.getRequest("/student/" + this.formInline.name, {}).then((resp) => {
        if (resp) {
          this.student = resp;
        }
      })
    }
  },
};
</script>

<style>
.addStuInput {
  width: 300px;
  margin-right: 8px;
}

.stuMain {
  margin-top: 10px;
}

.updateStuInput {
  width: 100px;
  margin-left: 8px;
}
</style>